<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #menu {
            position: relative;
            background: black;
            width: 150px;
            height: 30px;
            margin: 200px auto;
            overflow: hidden;
        }

        #sc {
            position: absolute;
            background-color: #80ffff;
            width: 150px;
            height: 120px;
            top: 0;
        }
    </style>
    <script>
    </script>
</head>

<body>
<div id="menu">
    <div id="sc"></div>
</div>
<script>
    var menu = document.getElementById('menu');
    var sc = document.getElementById('sc');
    var interval;

    function menuscroll() {
        var top = parseFloat(sc.style.top) || sc.scrollTop;
        top += 10;
        sc.style.top = top + "px";
    }
    menu.onmouseenter = function() {
        //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
        interval = setInterval("menuscroll()", 90);
    }
    menu.onmouseleave = function() {
        clearInterval(interval);
        sc.style.top = 0;
    }
</script>
</body>

</html>